<template>
  <el-dialog title="查看物流信息" :visible.sync="dialogVisible" width="1100px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商家物流" name="supplier">
        <div class="warn-box">
          <svg-icon style="margin-right: 17px" icon-class="warn" :size="20" />
          <div class="flex flex-1 tip">
            <p class="flex-1">
              1、可上传PDF、JPG、PNG等格式文件，单个文件最大限制10M；
              <br />2、用户发生租赁违约时，物流发货凭证和用户签收凭证可做法律依据。添加后不可进行删除，请谨慎操作。
            </p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户物流" name="user"></el-tab-pane>
    </el-tabs>
    <div class="content">
      <p>物流信息</p>
      <div class="flex info">
        <p class="flex-1">
          <label>物流名称：</label
          >{{
            infoData.delivery_type == 1
              ? infoData.logistics_name || "无"
              : infoData.delivery_type == 2
              ? "上门自取"
              : "上门安装"
          }}
          <el-button v-if="infoData.logistics_name && $hasMethod('#editLogistics')" @click="editFlow('name')" size="mini" type="primary" class="editBtn">修改</el-button>
        </p>
        <p class="flex-1">
          <label>物流单号：</label
          >{{ infoData.logistics_no ? infoData.logistics_no : "无" }}
          <el-button v-if="infoData.logistics_no && $hasMethod('#editLogistics')" @click="editFlow('no')" size="mini" type="primary" class="editBtn">修改</el-button>
        </p>
        <p v-if="activeName === 'supplier'" class="flex-1">
          <label>收货类型：</label
          >{{ infoData.delivery_type == 1 ? "商家确认收货" : "无" }}
        </p>
      </div>
      <div class="flex certify" v-if="activeName === 'supplier'">
        <div class="flex-1 flex">
          <label>发货凭证：</label>
          <div class="flex-1">
            <crop-upload
              ref="cropUpload"
              :multiple="true"
              show-type="photo"
              :hide-delete="true"
              :init-val="infoData.images"
              wrapper-width="100px"
              wrapper-height="100px"
              :photo-width="100"
              :photo-height="100"
              @setVal="imgChange"
            ></crop-upload>
          </div>
        </div>
        <div class="flex-1 flex">
          <label>用户签收凭证：</label>
          <div class="flex-1">
            <crop-upload
              ref="cropUpload1"
              :multiple="true"
              show-type="photo"
              :hide-delete="true"
              :init-val="infoData.sign_proof"
              wrapper-width="100px"
              wrapper-height="100px"
              :photo-width="100"
              :photo-height="100"
              @setVal="proofChange"
            ></crop-upload>
          </div>
        </div>
      </div>
      <p style="margin-top: 20px">物流记录</p>
      <div class="flow_table">
        <div class="flex header">
          <p class="text-center" style="width: 250px">时间</p>
          <p class="text-center flex-1">物流信息</p>
        </div>
        <div class="flow_info">
          <div class="flex" v-for="(item, index) in dataList" :key="index">
            <p style="width: 185px">{{ item.time }}</p>
            <span class="circle"></span>
            <p class="flex-1">{{ item.context }}</p>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </div>
    <el-dialog
      width="500px"
      :title="innerTitle"
      :visible.sync="innerVisible"
      append-to-body>
      <el-form :model="folwForm">
        <el-form-item label="物流名称：" v-if="editCode == 'logistics_name' " label-width="120px">
          <el-select
            v-model="folwForm.logistics_name"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in logisticsNames"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号：" v-if="editCode == 'logistics_no' " label-width="120px">
          <el-input v-model="folwForm.logistics_no" maxlength="20"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="editFlowInfo">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getLogisticAll, getLogisticInfo, setOrderVoucher, editOrderExpress } from "@/api/order";
import cropUpload from "@/components/cropUpload";
export default {
  components: { cropUpload },
  props: ["orderId"],
  data() {
    return {
      dialogVisible: false,
      activeName: "supplier",
      infoData: {},
      dataList: [],
      innerVisible: false,
      innerTitle: '',
      folwForm: {
        logistics_name: '',
        logistics_no: ''
      },
      editCode: 'logistics_name',
      logisticsNames: []
    };
  },
  methods: {
    getSelect() {
      getLogisticAll().then(res => {
        this.logisticsNames = res || [];
      })
    },
    handleClick(tab, event) {
      this.getInfo();
    },
    editFlow(type){
      this.innerVisible = true
      this.innerTitle = type=='name'? '修改物流名称' : '修改物流单号'
      this.editCode = type=='name'? 'logistics_name' : 'logistics_no'
    },
    editFlowInfo(){
      let {logistics_name, logistics_no} = this.folwForm
      let params = {
        orderId: this.orderId, 
        editCode: this.editCode, 
        editValue: this.editCode=='logistics_name'? logistics_name : logistics_no,
      }
      if(this.editCode == 'logistics_name'){
        if(!logistics_name){
          this.$message.warning('物流名称不能为空')
          return false
        }
      }
      if(this.editCode == 'logistics_no'){
        if(!logistics_no){
          this.$message.warning('物流单号不能为空')
          return false
        }
        if(logistics_no && !(/^[a-zA-Z0-9]{1,20}$/).test(logistics_no)){
          this.$message.warning('物流单号格式错误')
          return false
        }
      }
      editOrderExpress(params).then(res=>{
        this.cancelEdit()
        this.getInfo();
      })
    },
    cancelEdit(){
      this.folwForm = {
        logistics_name: '',
        logistics_no: ''
      }
      this.innerVisible = false
    },
    imgChange(val) {
      setOrderVoucher({
        orderId: this.orderId,
        type: 1,
        images: val,
      }).then((res) => {
        this.infoData.images.push(val);
        this.$refs.cropUpload.sortList = this.infoData.images;
      });
    },
    proofChange(val) {
      setOrderVoucher({
        orderId: this.orderId,
        type: 3,
        images: val,
      }).then((res) => {
        this.infoData.sign_proof.push(val);
        this.$refs.cropUpload1.sortList = this.infoData.sign_proof;
      });
    },
    getInfo() {
      getLogisticInfo({
        orderId: this.orderId,
        type: this.activeName === "supplier" ? 1 : 2,
      }).then((res) => {
        this.infoData = res || {};
        this.infoData.images = this.infoData.images
          ? this.infoData.images.split(",")
          : [];
        this.infoData.sign_proof = this.infoData.sign_proof
          ? this.infoData.sign_proof.split(",")
          : [];
        this.dataList = this.infoData.info ? this.infoData.info.data : [];
      });
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getInfo();
        this.getSelect();
      } else {
        this.activeName = "supplier";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tip {
  p:first-child {
    line-height: 22px;
  }
  p:not(:first-child) {
    padding: 16px 30px;
    border-left: 1px solid #ff9f37;
  }
}
.content > p {
  font-size: 16px;
  line-height: 23px;
}
.info,
.certify {
  padding: 0 60px;
  margin-top: 10px;
  p {
    line-height: 23px;
    label {
      color: #666666;
    }
  }
}
.flow_table {
  border: 1px solid #eeeeee;
  margin-top: 10px;
}
.header p {
  height: 40px;
  line-height: 40px;
  background: #f5f5f5;
  font-size: 16px;
  color: #666666;
}
.flow_info {
  padding: 0 45px;
  max-height: 280px;
  overflow: auto;
  & > div {
    position: relative;
    padding: 10px 0;
    &:first-child {
      padding-top: 20px;
      .circle::before {
        display: none;
      }
    }
    &:last-child {
      padding-bottom: 20px;
      .circle::after {
        display: none;
      }
    }
  }
  p {
    color: #999999;
    line-height: 20px;
  }
}
.circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #e8e8e8;
  border-radius: 50%;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  &::before {
    position: absolute;
    top: 0;
    height: 50%;
    display: inline-block;
    content: "";
    width: 1px;
    background-color: #e8e8e8;
  }
  &::after {
    position: absolute;
    bottom: 0;
    height: 50%;
    display: inline-block;
    content: "";
    width: 1px;
    background-color: #e8e8e8;
  }
}
a,
a:focus,
a:hover {
  color: $mainBlue;
}
.editBtn{
  margin-left: 10px;
}
</style>
